<template>

   <div>
     <h1>销量图</h1>
     <div class="echart" id="mychart" :style="myChartStyle"></div>
   </div>

</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["食品", "衣服", "数码", "电脑", "男鞋", "女鞋", "家具"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>
